<template>
<!-- unfold表示如果左边栏展开就顶部导航就变短收起就变长 -->
  <div id="topNav" :class="{unfold:getCollapse}">
    <el-row>
      <div @click="isCollapseToggle">
        <el-button class="isCollapseToggle">
          <el-icon class="el-icon-s-fold"></el-icon>
        </el-button>
      </div>
      <el-breadcrumb class="breadcrumb" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <drop-login class="topDrop">
      </drop-login>
    </el-row>
  </div>
</template>

<script>
// 导入Vuex中的mapGetters 辅助函数 ，帮助快速的将store中的getters映射到局部组件的计算属性中
import { mapGetters , mapMutations , mapActions } from 'vuex'
import DropLogin from './droplogin'
export default {
  data () {
    return {
      unfold: false
    }
  },
  components: {
    DropLogin
  },
  methods: {
    ...mapMutations('user',[
      'isCollapseToggle'
    ])
  },
  computed: {
    // 获取到展开类的值
    unfolds () {
      return this.$store.state.isCollapse
    },
    ...mapGetters('user',[
      'getCollapse'
    ])
  },
  mounted () {
  }
}
</script>

<style scoped lang="less">
#topNav{
  float:left;
  min-width:calc(100vw - 201px);
  padding:20px 0;
  padding-top:0;
  transition: all 0.4s;
  &.unfold{
    min-width:calc(100vw - 65px);
  }
  .isCollapseToggle{
    float:left;
    border:none 0;
    background: none;
    font-size:20px;
    border-radius:0;
    &:hover{
      background:#f9f9f9;
    }
  }
  .breadcrumb{
    line-height:44px;
    float:left;
  }
  .topDrop{
    float:right;
    margin-top:11px;
    padding-right: 20px;
  }
}
</style>
